<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>银泰网</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<nav>
			<div class="nav">
				<ul class="left">
					<li><img src="img/common1_02.png" /><span>银泰首页</span></li>
					<li><img src="img/common1_09.png" /><span>微信</span></li>
					<li><img src="img/common1_06.png" /><span>手机银泰</span></li>
				</ul>
				<img src="img/wechat.png" class="weixin" />
				<ul class="right">
					<li>Hi,欢迎来到银泰网！</li>
					<li>登录</li>
					<li>注册</li>
					<li><span>我的订单</span></li>
					<li>我的银泰</li>
					<li>银泰卡</li>
					<li>帮助中心</li>
				</ul>
			</div>
		</nav>

		<header>
			<div class="header">
				<div class="logo-0">
					<div>
						<div class="logo-1">
							<img src="img/test.gif" />
						</div>
						<div class="logo-2">
							<img src="img/input.gif" />
						</div>
					</div>
					<div>
						<div class="user">
							<input type="text" placeholder="优雅、个性…" />
							<div>购物袋<span> 0 </span>件&nbsp;&nbsp;&nbsp;&nbsp;▼</div>
						</div>
						<p>爱人觉得&nbsp; DIRJGIRM&nbsp; <span>按飞啊飞</span>&nbsp; <span>按飞啊飞</span>&nbsp; 而开发女 人类感觉到了</p>
					</div>
				</div>
				<div class="bottom">
					<ul class="ul">
						<li>全部分类</li>
						<li>名品&nbsp;|&nbsp;
							<font>惠买奢</font>
							<span>＞</span>
							<div>
								<img src="img/menu01.png" />
							</div>
						</li>
						<li>女装&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu02.png" />
							</div>
						</li>
						<li>男装&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu03.png" />
							</div>
						</li>
						<li>阿萨德&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu04.png" />
							</div>
						</li>
						<li>名品&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu05.png" />
							</div>
						</li>
						<li>女装&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu06.png" />
							</div>
						</li>
						<li>难赚&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu07.png" />
							</div>
						</li>
						<li>阿萨德&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu08.png" />
							</div>
						</li>
						<li>名品&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu09.png" />
							</div>
						</li>
						<li>女装&nbsp;|&nbsp;
							<font>春装上新</font>
							<span>＞</span>
							<div>
								<img src="img/menu10.png" />
							</div>
						</li>
					</ul>
					<ol>
						<li>银泰百货</li>
						<li>名品馆</li>
						<li>限时尊抢</li>
						<li>海淘馆</li>
						<li>荣耀旗舰店</li>
					</ol>
					<div>
						<span>积分商城</span>
						<span>全部品牌</span>
					</div>
					<img src="img/banner6.jpg" class="img" />
				</div>
			</div>
		</header>

		<div class="banner">
			<img src="img/banner1.jpg" style="display: block;" />
			<img src="img/banner2.jpg" />
			<img src="img/banner3.jpg" />
			<img src="img/banner4.jpg" />
			<img src="img/banner5.jpg" />
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="btn">
				<div class="btn_left">&lt;</div>
				<div class="btn_right">&gt;</div>
			</div>
		</div>

		<div class="chaozhi">
			<div class="chaozhi_a">
				<ul>
					<li class="li">超值特卖
					</li>
					<li class="li">爆款好货
					</li>
					<li class="li">手机专卖
					</li>
				</ul>
				<ol style="display: block;"  class="biankuang">
					<li>
						<img src="img/overFlowDiv01.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv02.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv03.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv04.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
				</ol>
				<ol  class="biankuang">
					<li>
						<img src="img/overFlowDiv11.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv12.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv13.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv14.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
				</ol>
				<ol  class="biankuang">
					<li>
						<img src="img/overFlowDiv31.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv32.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv33.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
					<li>
						<img src="img/overFlowDiv34.jpg" />
						<div class="top"></div>
						<div class="bottom"></div>
						<div class="left"></div>
						<div class="right"></div>
					</li>
				</ol>
				<div class="chaozhi_b">
					<img src="img/overFlowBig.jpg" />
				</div>
			</div>
		</div>
		<div class="tuijian">
			<div>
				<img src="img/pic2.jpg" />
			</div>
		</div>

		<div class="baihuo">
			<div class="baihuo_a">
				<div class="baihuo_a1">
					<h1>银泰百货<span>专柜同款</span></h1>
					<div>
						<p>SPECAL</p>
						<p>COETER</p>
					</div>
				</div>
				<div class="baihuo_a2">
					<div>
						<img src="img/canvas---副本_03.png" />
					</div>
					<ul>
						<li>
							热门品牌
						</li>
						<li>
							本周推荐
						</li>
					</ul>
					<ol style="display: block;">
						<li><img src="img/mad2.jpg" /></li>
						<li><img src="img/mad3.jpg" /></li>
						<li><img src="img/mad4.jpg" /></li>
						<li><img src="img/mad5.jpg" /></li>
						<li><img src="img/mad6.jpg" /></li>
						<li><img src="img/mad7.jpg" /></li>
					</ol>
					<ol class="biankuang1">
						<li>
							<img src="img/main121.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main122.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main123.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main124.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main125.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main126.png" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main127.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
						<li><img src="img/main128.jpg" />
							<div class="top"></div>
							<div class="bottom"></div>
							<div class="left"></div>
							<div class="right"></div>
						</li>
					</ol>
				</div>
			</div>
		</div>

		<div class="shishang">
			<div class="shishang_a">
				<div class="baihuo_a1">
					<h1>时尚名品</h1>
					<div>
						<p>SPECAL</p>
						<p>COETER</p>
					</div>
				</div>
				<div class="shishang_a2">
					<div>
						<ul>
							<li>T恤</li>
							<li>裙装</li>
							<li>太阳镜</li>
							<li>男式衬衫</li>
							<li>针织衫</li>
							<li>腰带</li>
							<li>女士大包</li>
							<li>钱包</li>
							<li>女士单鞋</li>
							<li>男士大包</li>
							<li>男鞋</li>
							<li>卫衣</li>
						</ul>
						<div>
							<ol>
								<li><img src="img/AA1.jpg" /></li>
								<li><img src="img/AA2.jpg" /></li>
								<li><img src="img/AA3.jpg" /></li>
								<li><img src="img/AA4.jpg" /></li>
							</ol>
						</div>
					</div>
					<div>
						<ul class="shiul">
							<li>
								<img src="img/BB.jpg" />
							</li>
							<li>
								<img src="img/BA.jpg" />
							</li>
						</ul>
						<ol class="oll">
							<li></li>
							<li></li>
						</ol>
						<div class="btn1 btn_left1">&lt;</div>
						<div class="btn1 btn_right1">&gt;</div>
					</div>
					<div>
						<img src="img/CA.jpg" />
						<img src="img/CB.jpg" />
						<img src="img/CC.jpg" />
						<img src="img/CD.jpg" />
					</div>
				</div>
			</div>
		</div>

		<div class="shishang">
			<div class="shishang_a">
				<div class="baihuo_a1">
					<h1>时尚名品</h1>
					<div>
						<p>SPECAL</p>
						<p>COETER</p>
					</div>
				</div>
				<div class="shishang_a2">
					<div>
						<ul>
							<li>T恤</li>
							<li>裙装</li>
							<li>太阳镜</li>
							<li>男式衬衫</li>
							<li>针织衫</li>
							<li>腰带</li>
							<li>女士大包</li>
							<li>钱包</li>
							<li>女士单鞋</li>
							<li>男士大包</li>
							<li>男鞋</li>
							<li>卫衣</li>
						</ul>
						<div>
							<ol>
								<li><img src="img/AA1.jpg" /></li>
								<li><img src="img/AA2.jpg" /></li>
								<li><img src="img/AA3.jpg" /></li>
								<li><img src="img/AA4.jpg" /></li>
							</ol>
						</div>
					</div>
					<div>
						<ul class="shiul">
							<li>
								<img src="img/BB.jpg" />
							</li>
							<li>
								<img src="img/BA.jpg" />
							</li>
						</ul>
						<ol class="oll">
							<li></li>
							<li></li>
						</ol>
						<div class="btn1 btn_left1">&lt;</div>
						<div class="btn1 btn_right1">&gt;</div>
					</div>
					<div>
						<img src="img/CA.jpg" />
						<img src="img/CB.jpg" />
						<img src="img/CC.jpg" />
						<img src="img/CD.jpg" />
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('.banner ul>li').eq(0).css('background', 'red');

		var index = 0;

		//图片轮播

		var timer = setInterval(fun, 2000);
		$('.btn_right').click(function() {
			clearInterval(timer);
			fun();
		})
		$('.btn_left').click(function() {
			clearInterval(timer);
			index--;
			if(index == -1) {
				index = 4;
			}
			play();
		})

		function fun() {
			//			clearInterval(timer);
			index++;
			if(index == 5) {
				index = 0;
			}
			play();
		}

		function play() {
			$('.banner>img').eq(index).stop().fadeIn(1000);
			$('.banner ul>li').eq(index).css('background', 'red');
			$('.banner ul>li').eq(index).siblings().css('background', '');
			$('.banner>img').eq(index).siblings('img').fadeOut(1000);
		}
		//		//鼠标移动上去暂停动画
		$('.banner').hover(function() {
			clearInterval(timer);
			$('.btn_left').stop().fadeIn(1000);
			$('.btn_right').stop().fadeIn(1000);
		}, function() {
			timer = setInterval(fun, 2000);
			$('.btn_left').stop().fadeOut(1000);
			$('.btn_right').stop().fadeOut(1000);
		})

		//点击小圆点
		$('.banner ul>li').hover(function() {
			clearInterval(timer);
			index = $(this).index();
			play()
		})

		//banner上的全部分类
		$('.ul>li').eq(0).siblings().hover(function() {
			$(this).find('div').css('display', 'block');
			$(this).css('background', '#eb0151');
		}, function() {
			$(this).find('div').css('display', 'none');
			$(this).css('background', '');
		})
		
		$('.chaozhi_a ul>li').eq(0).css('border-bottom-color', 'red')
		$('.chaozhi_a ul>li').hover(function(){
			index = $(this).index();
			$(this).css('border-bottom-color', 'red')
			$(this).siblings().css('border-bottom-color', '')
			$('.chaozhi_a ol').eq(index).stop().fadeIn(600);
			$('.chaozhi_a ol').eq(index).siblings('ol').stop().fadeOut(300);
		},function(){
			
		})
		
		
		
		
		//小轮播
		$('.oll>li').eq(0).css('background', '#eb0151');
		$('.shishang_a2>div').eq(1).hover(function() {
			$(this).find('.btn1').stop().fadeIn(1000);
		}, function() {
			$(this).find('.btn1').stop().fadeOut(1000);
		})

		$('.btn_right1').click(function() {
			$('.shiul').animate({
				'left': '-390px'
			}, 1000);
			//			$(this).prev().prev().prev().animate({'left':'-390px'},1000);
			$('.oll>li').eq(0).css('background', '');
			$('.oll>li').eq(1).css('background', '#eb0151');
		})
		$('.btn_left1').click(function() {
			$('.shiul').animate({
				'left': '0px'
			}, 1000);
			//			$(this).prev().prev().animate({'left':'-390px'},1000);
			$('.oll>li').eq(1).css('background', '');
			$('.oll>li').eq(0).css('background', '#eb0151');
		})

		$('.baihuo_a2 ul>li').eq(0).css('border-bottom-color', 'red')
		$('.baihuo_a2 ul>li').hover(function() {
			index = $(this).index();
			$(this).css('border-bottom-color', 'red')
			$(this).siblings().css('border-bottom-color', '')
			$('.baihuo_a2 ol').eq(index).stop().fadeIn(600);
			$('.baihuo_a2 ol').eq(index).siblings('ol').stop().fadeOut(300);
		})

		$('.nav .left>li').eq(1).hover(function() {
			$('.weixin').css('display', 'block');
		}, function() {
			$('.weixin').css('display', 'none');
		})

		//边框
		$('.biankuang1 li').hover(function() {
			$(this).find('.top').stop().animate({
				'width': '200px'
			}, 500);
			$(this).find('.bottom').stop().animate({
				'height': '260px'
			}, 500)
			$(this).find('.left').stop().animate({
				'width': '200px'
			}, 500)
			$(this).find('.right').stop().animate({
				'height': '260px'
			}, 500)
		}, function() {
			$(this).find('.top').stop().animate({
				'width': '0px'
			}, 500)
			$(this).find('.bottom').stop().animate({
				'height': '0px'
			}, 500)
			$(this).find('.left').stop().animate({
				'width': '0px'
			}, 500)
			$(this).find('.right').stop().animate({
				'height': '0px'
			}, 500)
		})
		
		
		$('.biankuang li').hover(function() {
			$(this).find('.top').stop().animate({
				'width': '220px'
			}, 500);
			$(this).find('.bottom').stop().animate({
				'height': '255px'
			}, 500)
			$(this).find('.left').stop().animate({
				'width': '220px'
			}, 500)
			$(this).find('.right').stop().animate({
				'height': '255px'
			}, 500)
		},function() {
			$(this).find('.top').stop().animate({
				'width': '0px'
			}, 500)
			$(this).find('.bottom').stop().animate({
				'height': '0px'
			}, 500)
			$(this).find('.left').stop().animate({
				'width': '0px'
			}, 500)
			$(this).find('.right').stop().animate({
				'height': '0px'
			}, 500)
		})
		
	</script>

</html>